import React, { Component, PropTypes } from 'react';
import { Icon, Button, Table, Switch, Form, Input, Modal } from 'antd';

const FormItem = Form.Item;


const columns = [
  { title: '问题列表', dataIndex: 'question_name', key: 'question_name' },
  { title: '操作', dataIndex: '', key: 'x', render: () => <a href="#">Delete</a> },
];

class QuestionGroupTable extends Component {

  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      loading: false
    }
  }


  render() {
    const { answerData ,tableLoading } = this.props
    return (
      <Table
          loading={tableLoading}
          columns={columns}
          expandedRowRender={record =><DynamicAddAnswer></DynamicAddAnswer>}
          dataSource={answerData}
          className="table"
        />
    )
  }
}



QuestionGroupTable = Form.create()(QuestionGroupTable);








export default QuestionGroupTable
let uuid = 0;
class DynamicAddAnswer extends React.Component {
  componentWillMount() {
    this.props.form.setFieldsValue({
      keys: [0],
    });
  }

  remove = (k) => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    // We need at least one passenger
    if (keys.length === 1) {
      return;
    }

    // can use data-binding to set
    form.setFieldsValue({
      keys: keys.filter(key => key !== k),
    });
  }

  add = () => {
    uuid++;
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    const nextKeys = keys.concat(uuid);
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
      keys: nextKeys,
    });
  }

  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    };
    const formItemLayoutWithOutLabel = {
      wrapperCol: { span: 20, offset: 4 },
    };

    const keys = getFieldValue('keys');
    const formItems = keys.map((k, index) => {
      return (
        <FormItem
          {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
          label={index === 0 ? 'Passengers' : ''}
          required={false}
          key={k}
        >
          {getFieldDecorator(`names-${k}`, {
            validateTrigger: ['onChange', 'onBlur'],
            rules: [{
              required: true,
              whitespace: true,
              message: "Please input passenger's name or delete this field.",
            }],
          })(
            <Input placeholder="passenger name" style={{ width: '60%', marginRight: 8 }} />
          )}
          <Icon
            className="dynamic-delete-button"
            type="minus-circle-o"
            disabled={keys.length === 1}
            onClick={() => this.remove(k)}
          />
        </FormItem>
      );
    });
    return (
      <Form horizontal>
        {formItems}
        <FormItem {...formItemLayoutWithOutLabel}>
          <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
            <Icon type="plus" /> Add
          </Button>
        </FormItem>
      </Form>
    );
  }
}
DynamicAddAnswer = Form.create()(DynamicAddAnswer);